<template>
  <!-- 系统管理 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="企业名称:" prop="enterprise">
            <el-input
              v-model.trim="filterForm.enterprise"
              class="filter-item limit"
              style="width: 200px;margin-right:10px"
              maxlength="30"
              clearable
              placeholder="请输入企业名称"
              @keyup.enter.native="$_handleFilter"
            />
          </el-form-item>
          <el-form-item label="意向行业:" prop="professionCode">
            <el-select v-model.trim="filterForm.professionCode" placeholder="请选择" :clearable="true">
              <el-option
                v-for="dict in dict.type.HYLX"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item label="所属园区:" prop="parkId">-->
<!--            <el-select v-model.trim="filterForm.parkId" placeholder="请选择" :clearable="true">-->
<!--              <el-option-->
<!--                v-for="dict in parkList"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="$_handleFilter">查询</el-button>
        <el-button @click="$_handleReset">重置</el-button>

      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['LIVEJOURNAL_DEL_BUTTON']"
            icon="el-icon-turn-off"
            @click="handleDelete('', true)"
          >
            批量删除
          </el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="MX_list"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
          @selection-change="$_handleSelectionChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            width="160px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                class="tBtn"
                @click="$_handleDetail(scope.row)"
              >详情</el-button>
              <el-button
                v-permission="['LIVEJOURNAL_DEL_BUTTON']"
                size="mini"
                type="danger"
                class="tBtn"
                @click="handleDelete(scope.row[idKeyName])"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="MX_total > 0"
          :total="MX_total"
          :page.sync="MX_pageNav.pageNo"
          :limit.sync="MX_pageNav.pageSize"
          @pagination="getList"
        />
      </div>
      <DialogForm ref="dialogForm" labelWidth="140px" :formDesignList="formDesignList" />
    </div>
  </div>
</template>
<script>
import DialogForm from '@/views/investment/components/DialogForm'
import commonList from "@/utils/mixins/investment/commonList";
import unifiedReportingApi from "@/api/investment/unifiedReporting";
import dataCaptureApi from "@/api/investment/dataCapture";

export default {
  name: 'Livejournal',
  components: {
    DialogForm
  },
  dicts: ['HYLX'],
  mixins: [commonList],
  data() {
    return {
      // parentId: null,
      filterForm: {
        enterprise: '',
        professionCode: '',
        // parkId: ''
      },
      // 列信息
      columns: [
        { prop: 'enterprise', label: `企业名称`, minWidth: '180px' },
        { prop: 'profession', label: `意向行业`, width: '150px' },
        // { prop: 'parkName', label: `中意园区`, width: '180px' },
        { prop: 'contactsName', label: `联系人`, width: '100px' },
        { prop: 'contactsPhone', label: `联系电话`, width: '120px' },
        { prop: 'intentionRequest', label: `投资要求`, minWidth: '200px' }
      ],
      formDesignList: [
        { type: 'text', prop: 'enterprise', label: `企业名称`, rules: [{ required: true, message: '请输入企业名称', trigger: 'blur' }] },
        { type: 'text', prop: 'profession', label: `意向行业`, rules: [{ required: true, message: '请输入意向行业', trigger: 'blur' }] },
        // { type: 'text', prop: 'parkName', label: `中意园区`, rules: [{ required: true, message: '请输入中意园区', trigger: 'blur' }] },
        { type: 'text', prop: 'contactsName', label: `联系人`, rules: [{ required: true, message: '请输入联系人', trigger: 'blur' }] },
        { type: 'text', prop: 'contactsPhone', label: `联系电话`, rules: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^(1[3456789]\d{9})$/, message: '请输入有效的联系电话', trigger: 'blur' }] },
        { type: 'textarea', prop: 'intentionRequest', label: `投资要求`, maxlength: 240, autosize: {minRows: 4, maxRows: 10} },
      ],
      idKeyName: 'intentionId',
      // parkList: []
    }
  },
  watch:{
    // parkList(val){
    //   this.$set(this.formDesignList[1], 'dictOptions', val)
    // },
    'filterForm.enterprise'(val, old){
      if (val !== old){
        this.getList()
      }
    }
  },
  created() {
    // if (!this.$route.query.id){
    //   this.$message.error('请带入数据标识！')
    //   return
    // }
    // this.getParkList()
    this.$set(this.filterForm, 'enterprise', this.$route.query.name || '')
  },
  activated() {
    this.$set(this.filterForm, 'enterprise', this.$route.query.name || '')
  },
  methods: {
    // getParkList(){
    //   unifiedReportingApi.getParkList().then(res => {
    //     let list = res.data || [];
    //     this.parkList = list.map(v => {
    //       v.value = v.parkId
    //       v.label = v.parkName
    //       return v
    //     })
    //   })
    // },
    // 获取页面列表
    getList() {
      this.$_getList(dataCaptureApi.getYXXXList,{
        ...this.filterForm,
        ...this.MX_pageNav
      })
    },
    // 删除按钮
    handleDelete(id, isMu = false) {
      let ids = [id]
      if (!!isMu){
        if (!this.MX_multipleSelection.length) {
          this.$dtMessageBox({title: '提示', message: `请选择需要进行批量删除的数据！`, type: 'warning'})
          return
        }
        ids = this.MX_multipleSelection.map(v => {
          return v[this.idKeyName]
        })
      }
      this.$_handleDelete(dataCaptureApi.delYXXXItem, ids, `${this.idKeyName}s`)
    },
  }
}
</script>

<style lang="scss" scoped>
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
</style>
